<template>
    <CommonContainer title="基础信息">
        <div class="suggestionInfo" v-if="orderDetail">
            <el-row :gutter="10">
                <el-col :span="viewType==1?20:24">
                    <el-descriptions>
                        <el-descriptions-item label="关联额度申请">{{orderDetail.calcSchemeCode}}</el-descriptions-item>
                        <el-descriptions-item label="客户名称">{{orderDetail.leaseeName}}</el-descriptions-item>
                        <el-descriptions-item label="客户类型">{{orderDetail.customerTypeStr}}</el-descriptions-item>
                        <el-descriptions-item label="业务类型">{{orderDetail.businessType}}</el-descriptions-item>
                        <el-descriptions-item label="产品方案">{{orderDetail.schemeName}}</el-descriptions-item>
                        <el-descriptions-item label="租赁用途">{{orderDetail.leasePurpose}}</el-descriptions-item>
                        <el-descriptions-item label="申请总台数">{{orderDetail.applicationTotal}}</el-descriptions-item>
                        <el-descriptions-item label="旧车当前估值总额/新车采购总额">{{orderDetail.applicationTotalAmount}}</el-descriptions-item>
                        <el-descriptions-item label="模板类型">租赁模版</el-descriptions-item>
                        <el-descriptions-item label="是否带驾">
                            {{orderDetail.leadingTheDriver==1?'是':'否'}}
                        </el-descriptions-item>
                    </el-descriptions>
                </el-col>
                <el-col :span="4" v-if="viewType==1">
                    <div class="apprvalStatus flex-xy-center"
                         :class="[detailInfo.approvalStatus==0 ?'active0':'',detailInfo.approvalStatus==1 ?'active1':'',detailInfo.approvalStatus==3?'active2':'',detailInfo.approvalStatus==2?'active3':'']">
                        <dict-tag :options="dict.type.approval_status" :value="detailInfo.approvalStatus"/>
                    </div>
                </el-col>
            </el-row>
            <div style="margin-top: 10px">
                <el-table
                    :data="orderDetail.cars"
                    :header-cell-style="{ background: '#FAFAFA', color: '#000000' }" border>
                    <el-table-column
                        align="center"
                        prop="vehicleManufacturers"
                        label="车辆厂商"
                        min-width="120">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="vehicleModel"
                        label="车辆车型"
                        min-width="120">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="vehicleStyle"
                        label="车辆款型"
                        min-width="120">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="carNo"
                        label="车牌号"
                        min-width="120">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="vehicleEnergyType"
                        label="车辆能源类型"
                        min-width="120">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="registrationNature"
                        label="登记性质"
                        min-width="120">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="applicationType"
                        label="申请类型"
                        min-width="120">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="leaseTerm"
                        label="租赁期限(月)"
                        min-width="120">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="rentPaymentMethod"
                        label="租金支付方式"
                        min-width="120">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="mileageLimit"
                        label="里程限制（公里)"
                        min-width="120">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="registeredCity"
                        label="上牌城市"
                        min-width="120">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="registrationFee"
                        label="上牌费"
                        min-width="120">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="insurancePremium"
                        label="保险费"
                        min-width="120">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="maintenancePremium"
                        label="维保费"
                        min-width="120">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="purchaseTax"
                        label="购置税"
                        min-width="120">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="vehicleAndVesselTax"
                        label="车船税"
                        min-width="120">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="installationCost"
                        label="加装费用"
                        min-width="120">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="otherExpenses"
                        label="其他费用"
                        min-width="120">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="irr"
                        label="IRR（含牌照）"
                        min-width="120">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="margin"
                        label="保证金"
                        min-width="120">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="monthlyRent"
                        label="月租金"
                        min-width="120">
                    </el-table-column>
                  <el-table-column label="首期租金、比例" align="center" prop="firstInstallmentRent" min-width="150px" show-overflow-tooltip>
                    <template v-slot="{row}">
                      <template v-if="row.firstInstallmentRentalRatio">
                        {{ row.firstInstallmentRent }} 、{{ row.firstInstallmentRentalRatio }}%
                      </template>
                      <template v-else>
                        -- 、--
                      </template>

                    </template>
                  </el-table-column>
                  <el-table-column label="残值、比例" align="center" prop="totalApplicationNumber" min-width="120px" show-overflow-tooltip>
                    <template v-slot="{row}">
                      <template v-if="row.residualValueRatio">
                        {{ row.residualValue }} 、 {{ row.residualValueRatio }}%
                      </template>
                      <template v-else>
                        -- 、--
                      </template>

                    </template>
                  </el-table-column>
                    <el-table-column
                        align="center"
                        prop="suggestedPrice"
                        label="厂商指导价"
                        min-width="120">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="purchasePrice"
                        label="预估采购价"
                        min-width="120">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="currentValuation"
                        label="当前估值"
                        min-width="120">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="numberOfApplications"
                        label="申请台数"
                        min-width="120">
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </CommonContainer>
</template>

<script>
export default {
    components: {},
    dicts:['approval_status'],
    props: {
        detailInfo: {
            type: Object,
            default: {}
        },
        viewType:{
            type:Number,
            default: 1
        }
    },
    data() {
        return {}
    },
    computed: {
        orderDetail(){
            return this.detailInfo?.orderDetails;
        }
    },
    methods: {},
    mounted() {
    },

}
</script>

<style lang="scss" scoped>
.suggestionInfo {
    position: relative;

    .apprvalStatus {
        position: absolute;
        right: 40px;
        width: 80px;
        height: 80px;
        font-size: 14px;
        text-align: center;
        border-radius: 40px;

        &.active0 {
            color: #1890FF;
            border: #1890FF solid 1px;
        }

        &.active1 {
            color: orange;
            border: orange solid 1px;
        }

        &.active2 {
            color: red;
            border: red solid 1px;
        }

        &.active3 {
            color: green;
            border: green solid 1px;
        }
    }
}
</style>
